<template>
  <div id="list-container">

    <ul class="note-list">
      <!--文章列表  有主图和无主图-->
      <li :class="{'have-img':  item.imageUrl}" v-for="item in this.articleList" :key="item.id">
        <article class="content article-item">
          <!--<nuxt-link>与<router-link>用法一致-->
          <nuxt-link :to="`/article/${item.id}`" target="_blank">
            <p class="title"> {{ item.title }}</p>
            <p class="abstract">
              {{ item.summary }}
            </p>
          </nuxt-link>
          <div class="meta">
            <nuxt-link :to="`/user/${item.userId}`" target="_blank" class="nickname">
              <i class="el-icon-user-solid"></i> {{ item.nickName }}
            </nuxt-link>
            <span><i class="el-icon-thumb"></i> {{ item.thumhup }}</span>
            <span><i class="el-icon-view"></i> {{ item.viewCount }}</span>
          </div>
          <div v-if="item.imageUrl">
            <!-- 图片 -->
            <nuxt-link :to="`/article/${item.id}`" class="wrap-img" target="_blank">
              <img :src="item.imageUrl"  alt="加载失败">
            </nuxt-link>
          </div>
        </article>
      </li>

<!--      &lt;!&ndash;有主图&ndash;&gt;-->
<!--      <li v-for="item in 4" :key="item" class="have-img">-->
<!--        <article class="content article-item">-->
<!--          &lt;!&ndash;<nuxt-link>与<router-link>用法一致&ndash;&gt;-->
<!--          <nuxt-link to="/article/111" target="_blank">-->
<!--            <p class="title">关于我重生变成猫这件事</p>-->
<!--            <p class="abstract">-->
<!--              关于我重生变成猫这件事关于我重生变成猫这件事关于我重生变成猫这件事关于我重生变成猫这件事关于我重生变成猫这件事-->
<!--              关于我重生变成猫这件事关于我重生变成猫这件事关于我重生变成猫这件事关于我重生变成猫这件事关于我重生变成猫这件事-->
<!--              关于我重生变成猫这件事关于我重生变成猫这件事关于我重生变成猫这件事关于我重生变成猫这件事-->
<!--            </p>-->
<!--          </nuxt-link>-->
<!--          <div class="meta">-->
<!--            <nuxt-link to="/user/111" target="_blank" class="nickname">-->
<!--              <i class="el-icon-user-solid"></i>黄少天-->
<!--            </nuxt-link>-->
<!--            <span><i class="el-icon-thumb">420</i></span>-->
<!--            <span><i class="el-icon-view">2616</i></span>-->
<!--          </div>-->
<!--        </article>-->
<!--        &lt;!&ndash;图片&ndash;&gt;-->
<!--        <nuxt-link to="/article/333" class="wrap-img" target="_blank">-->
<!--          <img src="https://b.zol-img.com.cn/desk/bizhi/image/10/208x130/1603074856139.jpg" alt="">-->
<!--        </nuxt-link>-->
<!--      </li>-->
    </ul>

    <el-row type="flex" justify="center">
      <el-tag v-if="noMore" >没有更多数据了……</el-tag>
      <el-button v-else @click="load" type="primary" plain :loading="loading" size="big" round>
        {{ loading ? '加载中……' : '点击加载更多' }}
      </el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  // name: "_id",
  // 校验路由参数是否有效
  validate({params}) {
    const id = params.id ? params.id : 0
    // 必须是数值
    return /^\d+$/.test(id)
  },

  async asyncData({params, app, $axios}) {
    // 分类id，为空则查询推荐
    const categoryId = params.id ? params.id : null

    // 查询文章列表
    const query = {categoryId, current: 1, size: 20}
    const {data} = await app.$getArticleList(query)

    // console.log('data111', data.records)
    return {query, articleList: data.records}
  },
  data() {
    return {
      loading: false, // 是否加载中
      noMore: false // 数据已经查询完，没有更多数据, true 没有了，false查询到了数据
    }
  },
  methods: {
    async load() {
      this.loading = true
      // 将页码加1
      this.query.current++
      const {data} = await this.$getArticleList(this.query)
      // 有数据
      if (data.records && data.records.length > 0) {
        this.noMore = false
        // 将新数据追加到原有数组中
        this.articleList = this.articleList.concat(data.records)
      } else {
        // 没有数据
        this.noMore = true
      }
      // 当前加载完了
      this.loading = false
    }
  }
}
</script>

<style scoped>
@import "~@/assets/css/blog/list.css";
</style>
